<template>
  <div class="item-form-encrypt-mnt w-full h-full display-flex" style="overflow: hidden">
    <div class="h-full flex-1 display-flex content-box" style="overflow: hidden">
      <div class="flex-1 h-full info-box display-flex-column" style="overflow: hidden">
        <div class="title-box display-flex">业务类型</div>
        <div class="h-full flex-1 list-box display-flex-column" style="overflow: auto">
          <div
            class="list-item display-flex"
            v-for="item in invItemList"
            :key="item.id"
            :class="{'list-item-selected': invItemSelected === item}"
            @click="handlerInvItemSelected(item)">
            {{ `${item.item_name}[${item.item_code}](${item.source === "investment_three_new" ? '新' : '旧'})` }}
          </div>

        </div>
      </div>
      <div class="h-full bg-border" style="width: 10px"></div>
      <div class="flex-1 h-full info-box display-flex-column">
        <div class="title-box display-flex">
          <div class="title-name">字段列表</div>
          <div class="h-full" style="width: 10px"></div>
          <a-select v-model="invItemCategory" style="width: 120px" @change="handlerInvItemCategoryChange">
            <a-select-option value="common">普通</a-select-option>
            <a-select-option value="ext">延期/变更</a-select-option>
            <a-select-option value="des">注销</a-select-option>
          </a-select>
          <a-checkbox class="m-l-sm" v-model="isShowEncrypt" @change="handlerShowEncryptChange">
            仅展示已勾选
          </a-checkbox>
        </div>
        <div class="h-full flex-1 list-box display-flex-column" style="overflow: hidden auto">
          <a-tree
            v-if="invItemFormList.length > 0"
            checkable
            :tree-data="invItemFormList"
            :expandedKeys="expandedKeys"
            :replaceFields="{title:'title','key':'id'}"
            v-model="checkedKeys"
            @check="handlerCheck"
          >
          </a-tree>
        </div>
      </div>
      <div class="h-full bg-border" style="width: 10px"></div>
      <div class="h-full flex-1 display-flex-column" style="align-items: flex-start;justify-content: flex-end">
        <a-button type="primary" @click="handlerSaveData">保存</a-button>
      </div>
    </div>
  </div>
</template>
<script>
import invService from '@/api/invService'

export default {
  name: 'ItemFormEncryptMnt',
  props: {},
  data () {
    return {
      invItemList: [],
      invItemSelected: null,
      invItemCategory: 'common',
      invItemFormList: [],
      sourceInvItemFormList: [],
      expandedKeys: [],
      isShowEncrypt: false,
      checkedKeys: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    handlerCheck (checkedKeys, e) {
      const record = e.node.$vnode.data.props.dataRef
      record.encrypt = e.checked
    },
    async handlerSaveData () {
      const data = this.sourceInvItemFormList
      const needData = []
      data.forEach(item => {
        needData.push({
          id: item.id,
          encrypt: item.encrypt
        })
      })
      await invService.updateItemFormEncrypt(needData)
      this.$message.success('保存成功')
    },
    handlerShowEncryptChange () {
      this.mergeInvestmentFormList()
    },
    handlerInvItemCategoryChange () {
      this.getInvestmentItemFormList()
    },
    handlerInvItemSelected (record) {
      if (record !== this.invItemSelected) {
        this.invItemSelected = record
        this.getInvestmentItemFormList()
      }
    },
    treeDataByParentCode (data, targetList, parentMap) {
      data.forEach(item => {
        if (item.parent_code) {
          const parent = parentMap[item.parent_code]
          if (parent) {
            parent.children.push(item)
          }
        }
      })
    },
    mergeInvestmentFormList () {
      const data = this.sourceInvItemFormList
      this.invItemFormList = []
      this.expandedKeys = []
      this.checkedKeys = []
      const targetList = []
      const parentMap = {}
      data.forEach(item => {
        if (!item.parent_code) {
          targetList.push(item)
        }
        item.children = []
        if (item.name) {
          item.title = `${item.code}(${item.name})`
        } else {
          item.title = item.code
        }
        parentMap[item.code] = item
      })
      this.treeDataByParentCode(data, targetList, parentMap)

      if (this.isShowEncrypt) {
        this.sourceInvItemFormList.forEach(item => {
          const parentCode = item.parent_code
          if (parentCode && parentMap[parentCode]) {
            item.parent = parentMap[parentCode]
          }
        })
        this.sourceInvItemFormList.forEach(item => {
          if (item.encrypt) {
            let parent = item.parent
            if (!item.children || item.children.length <= 0) {
              this.checkedKeys.push(item.id)
            }
            while (parent) {
              parent.encrypt = true
              parent = parent.parent
            }
          }
        })
        const newTargetList = []
        targetList.forEach(item => {
          if (item.encrypt) {
            newTargetList.push(item)
          }
        })
        const expendKeys = []
        Object.keys(parentMap).forEach(key => {
          if (parentMap[key].children.length > 0) {
            expendKeys.push(parentMap[key].id)
          }
        })
        this.invItemFormList = newTargetList
        this.expandedKeys = expendKeys
      } else {
        const expendKeys = []
        this.sourceInvItemFormList.forEach(item => {
          if (item.encrypt) {
            if (!item.children || item.children.length <= 0) {
              this.checkedKeys.push(item.id)
            }
          }
        })
        Object.keys(parentMap).forEach(key => {
          if (parentMap[key].children.length > 0) {
            expendKeys.push(parentMap[key].id)
          }
        })
        this.invItemFormList = targetList
        this.expandedKeys = expendKeys
      }
      console.log('checkedKeys', this.checkedKeys)
    },
    async getInvestmentItemFormList () {
      let data = null
      if (this.invItemSelected.item_code) {
         data = await invService.getInvestmentItemFormList(this.invItemSelected.item_code, this.invItemCategory, this.invItemSelected.source)
      } else {
        data = await invService.listInvestmentItemSystemForm({ category: this.invItemCategory, source: this.invItemSelected.source })
      }
      this.sourceInvItemFormList = data
      this.mergeInvestmentFormList()
    },
    async getAllInvItemList () {
      const data = await invService.getAllInvestmentItemList({})
      this.invItemList = data
      data.unshift({
        id: -2,
        approve_type: '01',
        item_code: '',
        item_name: '3.0大项目基础信息',
        source: 'investment_three_old'
      })
      data.unshift({
        id: -1,
        approve_type: '01',
        item_code: '',
        item_name: '3.0大项目基础信息',
        source: 'investment_three_new'
      })

      this.handlerInvItemSelected(this.invItemList[0])
    },
    init () {
      this.getAllInvItemList()
    }
  }
}
</script>

<style scoped lang="less">
.item-form-encrypt-mnt {
  background-color: white;
  padding: 10px;

  .content-box {
    .info-box {
      border: 2px solid #ebedf1;

      .title-box {
        height: 40px;
        font-weight: bolder;
        font-size: 18px;
        background-color: #ebedf1;
      }

      .list-box {
        .list-item {
          flex-shrink: 0;
          justify-content: flex-start;
          padding: 10px 10px;
          margin-top: 10px;

          &:hover {
            cursor: pointer;
            background-color: rgba(235, 237, 241, 0.7);
          }

          &-selected {
            background-color: #f2fcff;
            color: #2BAEF2;
            font-weight: bolder;
          }
        }

      }

    }
  }

  .bg-border {
  }
}

</style>
